<template>

  <div class="shopsDetail">



<el-dialog
  title=""
  :visible.sync="dialogVisible"
  width="850px">
  <qrbox class="" :qrUrl="qrpath" ></qrbox>

</el-dialog>


    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/shops' }">店铺管理</el-breadcrumb-item>

        <el-breadcrumb-item v-if="vm.isAudit">店铺审核 </el-breadcrumb-item>
        <el-breadcrumb-item v-if="!vm.isAudit">店铺详情</el-breadcrumb-item>

      </el-breadcrumb>

    </el-row>
    <div class="content">
      <h2>{{form.shop_name}}
</h2>
      <p>
        <el-button v-if="!vm.isAudit" @click="getQr()">
        <i class="el-icon-tickets"></i>绑定店长微信
        </el-button></p>
      <el-row :gutter="20">
        <el-col :span="22">加入时间：{{form.create_time}}</el-col>
        <!-- <el-col :span="2"><i class="el-icon-edit" @click="edit();"></i></el-col> -->


      </el-row>


      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top: 20px;padding: 40px;background: #f9f9f9">
        <el-form-item label="店铺名称">
          <el-input v-model="form.shop_name" :disabled="vm.isEdit"></el-input>
        </el-form-item>
        <el-form-item label="店长">
          <el-input v-model="form.master_name" :disabled="vm.isEdit"></el-input>
        </el-form-item>
        <el-form-item label="区域" prop="city">
          <el-input v-model="form.city" :disabled="vm.isEdit"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" :disabled="vm.isEdit"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input v-model="form.address" :disabled="vm.isEdit"></el-input>
        </el-form-item>
        <el-form-item label="店铺介绍">
          <el-input v-model="form.introduction" :disabled="vm.isEdit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="!vm.isAudit" :disabled="!canSave" type="primary"  @click="vaild">保存</el-button>
          <el-button v-if="vm.isAudit" type="primary" @click="audit(1)">同意</el-button>
          <el-button v-if="vm.isAudit" type="warning" @click="audit(0)">拒绝</el-button>

        </el-form-item>

      </el-form>





    </div>

  </div>
</template>
<style>
#role-manage span {
  margin-left: 8px;
  color: #666;
}
#role-manage .el-switch__button {
  margin-left: 0;
}
.qr_div {
  width: 100%;
  position: fixed;
  margin: 250px auto;
  z-index: 999;
}
</style>
<script>
import * as Shops from "@/api/shops";
import * as Tools from "@/api/Tools";

import qrbox from "@/components/addStoreQr.vue";

export default {
  name: "shopsEdit",
  computed: {
    canSave: function() {
      if (this.form.city) {
        return true;
      } else {
        return false;
      }
    }
  },
  components: {
    qrbox
  },
  data() {
    return {
      vm: {
        isEdit: false,
        schema: [],
        vehicle: [],
        threadMan: { name: "", phone: "" },
        staff: { name: "", phone: "" },
        custom: [],
        isLoading: false,
        isError: false,
        models: [],
        submit_time: "",
        canAudit: true,
        message: "",
        canSave: true,
        canAdd: true,
        id: ""
      },
      rules: {
        city: [
          { required: true, message: "请输入城市名称", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 2 到 12 个字符", trigger: "blur" }
        ]
      },
      form: {
        manager: "",
        city: "",
        phone: "",
        address: "",
        introduce: ""
      },
      showQrCode: false,
      qrpath: "",
      dialogVisible: false
    };
  },

  mounted() {
    if (this.$route.params.id > 0) {
      this.vm.isEdit = false;
      this.id = this.$route.params.id;
      this.vm.id = this.$route.params.id;
    }
    this.vm.isAudit = this.$route.query.audit;
    if (this.vm.isAudit == 1) {
      this.query({child: 'applies'});
    } else {
      this.query();
    }
  },
  methods: {
    vaild() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submit_edit();
        } else {
          this.$message({
            message: "表单填写错误",
            type: "warning"
          });
          return false;
        }
      });
    },
    submit_edit() {
      let that = this;

      that.vm.canSave = true;

      Shops.edit(that.form)
        .then((res) => {
          that.$message({
            message: "修改成功",
            type: "success"
          });
          this.$router.replace({name: 'shopsList', params: {current: res.shop_id}});
        })
        .catch(function() {
          that.vm.canSave = false;
        });
    },

    query(config) {
      Shops.get(this.id, config).then(
        res =>
          this.form = res
      )
    },

    audit(approved) {

      Shops.audit(this.id, approved).then((res) => {
        this.$message({
          message: "审核成功",
          type: "success"
        });
        // this.$route.params.current
        this.$router.replace({name: 'shopsList', params: {current: res.shop_id}});
      });
    },


    getQr() {
      this.dialogVisible = true;
      let _this = this;
      let postData = {
        scene: this.form.master_staff_id,
        page: "common/invite/invite"
      };

      Tools.qr(postData).then(function (res) {
        console.log(res);
        _this.qrpath = res.path;
      });


    }
  }
};
</script>
